<template>
    <el-row>
        <el-col
            style="height: 500px; display: flex; justify-content: center; align-items: center"
        >
            <el-card class="box-card">
                <div class="header-center">
                    <span>修改密码</span>
                </div>
                <div class="card-body">
                    <el-form 
                        v-if="highPass"
                        label-width="80px"
                        :rules="rules"
                        ref="changePasswordForm"
                        :model="password"
                    >
                        <el-form-item label="原密码" prop="oldOne">
                            <el-input
                                size="mini"
                                type="password"
                                v-model="password.oldOne"
                                placeholder="请输入原密码"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="新密码" prop="newOne" >
                            <el-input
                                size="mini"
                                type="password"
                                v-model="password.newOne"
                                placeholder="请输入新密码(至少8位由数字、小写字母、大写字母组合)"
                                @input="newPassword"
                            ></el-input>
                        </el-form-item>
                        <div class="passwordTipsbox">
                          <div class="passwordTips">
                            <div>密码强度:</div>
                            <p v-bind:class="{ lovercase_valid: newOne_lovercase }"></p>
                            <p v-bind:class="{ number_valid: newOne_number }"></p>
                            <p v-bind:class="{ uppercase_valid: newOne_uppercase }"></p>
                            <el-badge :value="new_password_length" class="item" type="primary" style="margin-left:20px;"></el-badge>
                          </div>
                          <i v-show="new_valid_password_length" class="el-icon-success"></i>
                        </div>
                        <el-form-item label="确认密码" prop="check">
                            <el-input
                                size="mini"
                                type="password"
                                v-model="password.check"
                                placeholder="请确认新密码(至少8位由数字、小写字母、大写字母组合)"
                                @input="checkPassword"
                            ></el-input>
                        </el-form-item>
                        <div class="passwordTipsbox">
                          <div class="passwordTips">
                            <div>密码强度:</div>
                            <p v-bind:class="{ lovercase_valid: check_lovercase }"></p>
                            <p v-bind:class="{ number_valid: check_number }"></p>
                            <p v-bind:class="{ uppercase_valid: check_uppercase }"></p>
                            <el-badge :value="check_password_length" class="item" type="primary" style="margin-left:20px;"></el-badge>
                          </div>
                          <i v-show="check_valid_password_length" class="el-icon-success"></i>
                        </div>
                    </el-form>
                    <el-form
                        v-else
                        label-width="80px"
                        :rules="rules"
                        ref="changePasswordForm"
                        :model="password"
                    >
                        <el-form-item label="原密码" prop="oldOne">
                            <el-input
                                size="mini"
                                type="password"
                                v-model="password.oldOne"
                                placeholder="请输入原密码"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="新密码" prop="newOne" >
                            <el-input
                                size="mini"
                                type="password"
                                v-model="password.newOne"
                                placeholder="请输入新密码"
                                @input="newPassword"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="确认密码" prop="check">
                            <el-input
                                size="mini"
                                type="password"
                                v-model="password.check"
                                placeholder="请确认新密码"
                                @input="checkPassword"
                            ></el-input>
                        </el-form-item>
                    </el-form>
                    <el-row>
                        <el-col class="operate">
                            <el-button
                                size="mini"
                                type="primary"
                                @click="sureToChange"
                                >保 存</el-button
                            >
                            <el-button size="mini" @click="cancel"
                                >返 回</el-button
                            >
                        </el-col>
                    </el-row>
                </div>
            </el-card>
        </el-col>
    </el-row>
</template>

<script>
export default {
  name: 'Password',

  data() {
    const checkOldPassWord = (rule, value, callback) => {
      console.log('value', value);
      if (!value) {
        callback(new Error(' '));
        this.$message('请验证原密码');
      } else {
        callback();
      }
    };
    const checkNewPassWord = (rule, value, callback) => {
      if (!value) {
        callback(new Error(' '));
        this.$message('请输入新密码');
      } else if (value === this.password.oldOne) {
        callback(new Error(' '));
        this.$message('新密码不可与原密码相同');
      } else {
        callback();
      }
    };
    const checkNewPassWordSame = (rule, value, callback) => {
      if (!value) {
        callback(new Error(' '));
        // this.$message('请确认新密码')
      } else if (value === this.password.newOne) {
        callback();
      } else {
        callback(new Error(' '));
        // this.$message('请确认两次新密码内容一致')
      }
    };
    return {
      highPass:false,
      new_password_length: 0,
      newOne_lovercase: false,
      newOne_number: false,
      newOne_uppercase: false,
      new_valid_password_length: false,
      check_password_length: 0,
      check_lovercase: false,
      check_number: false,
      check_uppercase: false,
      check_valid_password_length: false,
      password: {
        oldOne: '',
        newOne: '',
        check: '',
      },

      rules: {
        oldOne: [
          {
            required: true,
            validator: checkOldPassWord,
            trigger: 'blur',
          },
        ],
        newOne: [
          {
            required: true,
            validator: checkNewPassWord,
            trigger: 'blur',
          },
        ],
        check: [
          {
            required: true,
            validator: checkNewPassWordSame,
            trigger: 'blur',
          },
        ],
      },
    };
  },
  async mounted(){
    this.highPass = true;
  },
  methods: {
    cancel() {
      this.$router.back();
    },
    newPassword(){
      let re = new Array();
      re[0]=/[a-z]/;
      re[1]=/\d/;
      re[2]=/[A-Z]/;
      let sec = 0;
      for (let i = 0; i < re.length; i++){
        if (this.password.newOne.match(re[i])){
          sec++;
        }
      }
      if(sec==1){this.newOne_lovercase=true;this.newOne_number=false;this.newOne_uppercase = false;}
      if(sec==2){this.newOne_lovercase=true;this.newOne_number=true;this.newOne_uppercase = false;}
      if(sec==3){this.newOne_lovercase=true;this.newOne_number=true;this.newOne_uppercase = true;}
      let resgx =/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/;
      this.new_password_length = this.password.newOne.length;
      if(this.newOne_lovercase&&this.newOne_number&&this.newOne_uppercase&&this.password.newOne.length>=8){
        this.new_valid_password_length=true;
      }else{
        this.new_valid_password_length=false;
      }
    },
    checkPassword(){
      let re = new Array();
      re[0]=/[a-z]/;
      re[1]=/\d/;
      re[2]=/[A-Z]/;
      let sec = 0;
      for (let i = 0; i < re.length; i++){
        if (this.password.check.match(re[i])){
          sec++;
        }
      }
      if(sec==1){this.check_lovercase=true;this.check_number=false;this.check_uppercase = false}
      if(sec==2){this.check_lovercase=true;this.check_number=true;this.check_uppercase = false}
      if(sec==3){this.check_lovercase=true;this.check_number=true;this.check_uppercase = true}
      this.check_password_length = this.password.check.length;
      if(this.password.newOne==this.password.check){
        this.check_valid_password_length=true;
      }else{
        this.check_valid_password_length=false;
      }
    },
    sureToChange() {
      let re =/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/;
      console.log(re.test(this.password.newOne));
      if(!re.test(this.password.newOne)){
        this.$message.info("密码至少包含大写字母，小写字母，数字，且不少于8位");
        return
      }
      this.$refs.changePasswordForm.validate((valid) => {
        console.log('验证结果', valid);
        if (valid) {
          // console.log(this.password);
          this.$confirm(
            '该项操作将更改用户登陆密码, 是否继续?',
            '提示',
            {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            },
          )
            .then(() => {
              try {
                this.$axios({
                  method: 'put',
                  url:
                    '/PROXY-Remote/change-password/no/login?'
                    + `newPassword=${this.password.newOne}&oldPassword=${this.password.oldOne}&userName=${this.$route.query.username}`,
                  data: '',
                  headers: {
                    'Content-Type': 'application/json',
                  },
                }).then(
                  (res) => {
                    if (res && res.data.code === 200) {
                      this.$router.push('/login');
                      this.$message.success('更新成功');
                    }
                  },
                  (err) => {
                    this.$message.info(
                      `更新失败  ${err.response.data.message}`,
                    );
                  },
                );
              } catch (e) {
                this.$message.info(`请求失败  ${e}`);
              }
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消',
              });
            });
        } else {
          if (!this.password.oldOne) {
            this.$message('请输入原密码');
          } else {
            console.log(
              '!this.password.newOne',
              !this.password.newOne,
            );
            if (!this.password.newOne) {
              this.$message('请输入新密码');
            } else if (
              this.password.oldOne === this.password.newOne
            ) {
              this.$message('新密码不可与原密码相同');
            } else if (!this.password.check) {
              this.$message('请确认新密码');
            } else if (
              this.password.newOne !== this.password.check
            ) {
              this.$message('请确认两次新密码内容一致');
            }
          }
          // this.$message('填写有误，请修改后保存');
          return false;
        }
        return null;
      });
    },
  },
};
</script>

<style scoped>
    .box-card {
        width: 600px;
    }
    .header-center {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.5rem;
        margin-bottom: 20px;
    }
    .card-body {
        padding: 20px;
    }
    .operate {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .operate .el-button + .el-button {
        margin-left: 40px;
    }
    .passwordTipsbox{display: flex;align-items: center;justify-content: space-between;}
    .passwordTips{display: flex;font-size: 12px;align-items: center;justify-content: space-around;}
    .passwordTips div{margin-left: 20px;}
    .passwordTips p{background-color: #fff;width: 50px;height: 5px; border: 1px solid #10a1df;text-align: center;margin-left: 2px;}
    .passwordTips p:nth-child(1){margin-left: 10px;}
    .passwordTipsbox i{height: 20px;color:#67c23a}
    .passwordTips .lovercase_valid{background-color: #67c23a;}
    .passwordTips .number_valid{background-color: #67c23a;}
    .passwordTips .uppercase_valid{background-color: #67c23a;}
</style>
